<template>
    <div class="work3">
        <p>{{isShow?"显示":"隐藏"}}</p>
        <switch-box v-model="isShow" />
        <input type="text" :value="val" @input="val=$event.target.value" />
        <input type="text" v-model="val" />

        <!-- slot内容的作用域在父组件,只DOM结构不过显示在子组件里面 -->
        <input-box :value="val" @input="val=$event" />
        <input-box type="text" v-model="val" >
            <h1>子标签1</h1>
            <h2>子标签2{{num}}</h2>
        </input-box>
    </div>
</template>

<script>
import InputBox from '@/components/InputBox.vue'
    export default {
        components:{InputBox},
        data(){
            return {
                val:'初始值',
                num:100,
                isShow:false
            }
        }
    }
</script>

<style lang="sass" scoped>

</style>